<template>
  <div class="course-list">
    <div class="header">
      <!-- 课程信息 -->
      <div class="course-info">
        <div class="info-left">
          <div class="back-btn" @click="goBack()">
            <el-icon>
              <ArrowLeft />
            </el-icon>
            <span>返回</span>
          </div>
          <div class="course-title">{{ courseName }}</div>
        </div>
        <div class="info-right">
          <div class="info-right">
            <span>当前班级：</span>
            <el-select
              v-model="classId"
              placeholder="请选择班级"
              @change="changeClass"
              style="width: 150px"
              :disabled="
                $route.path === '/aiTeaching/courseSystem/aiAnalysisDetail'
              "
            >
              <el-option
                v-for="item in classList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </div>
        </div>
      </div>
      <!-- 导航 -->
      <div class="header-nav">
        <el-menu
          :default-active="activeIndex"
          mode="horizontal"
          router
          :ellipsis="false"
        >
          <el-menu-item index="/aiTeaching/courseSystem/chapterContents">
            <span>章节目录</span>
          </el-menu-item>
          <el-menu-item index="/aiTeaching/courseSystem/courseOutline">
            <span>课程大纲</span>
          </el-menu-item>
          <el-menu-item
            index="/aiTeaching/courseSystem/aiExam"
            :disabled="disabledNav"
          >
            <span>智能考核</span>
          </el-menu-item>
          <el-menu-item index="/aiTeaching/courseSystem/knowledgeGraph">
            <span>知识图谱</span>
          </el-menu-item>
          <el-menu-item index="/aiTeaching/courseSystem/knowledgeBase">
            <span>学科知识库</span>
          </el-menu-item>
          <el-menu-item
            index="/aiTeaching/courseSystem/aiAnalysis"
            :disabled="disabledNav"
          >
            <span>智能分析</span>
          </el-menu-item>
          <el-menu-item index="/aiTeaching/courseSystem/teachingManage">
            <span>教学管理</span>
          </el-menu-item>
        </el-menu>
      </div>
    </div>

    <!-- 二级路由页面 -->
    <router-view></router-view>
  </div>
</template>

<script>
import eventBus from "@/utils/eventBus";

export default {
  data() {
    return {
      courseId: JSON.parse(localStorage.getItem("courseId")),
      roles: "",
      activeIndex: "",
      courseName: "",
      className: "",
      classList: [],
      classId: "",
      disabledNav: false,
    };
  },
  mounted() {
    this.roles = JSON.parse(localStorage.getItem("userInfo")).roles[0];
    this.courseName = localStorage.getItem("courseName");
    this.updateActiveIndex();
    this.getclassInfo();
    // 监听班级信息更新事件
    eventBus.on("updateClassInfo", this.getclassInfo);
  },
  beforeUnmount() {
    // 移除事件监听
    eventBus.off("updateClassInfo", this.getclassInfo);
  },
  watch: {
    $route() {
      this.updateActiveIndex();
    },
  },
  methods: {
    // 获取班级信息
    getclassInfo() {
      this.$axios
        .get(`/tes/course/${this.courseId}/list-class?endFlag=false`)
        .then((res) => {
          if (res.code == 100106) {
            this.disabledNav = true;
            this.classList = [];
            this.classId = "";
          } else {
            this.disabledNav = false;
            this.classList = res.data;
            this.classId = res.data[0].classIds[0];
            localStorage.setItem("classId", this.classId);
          }
        });
    },

    updateActiveIndex() {
      this.activeIndex = this.$route.meta.activeMenu || this.$route.path;
    },
    goBack() {
      this.$router.go(-1);
      // this.$router.push("/aiTeaching/systemCourseList");
    },
    changeClass(val) {
      localStorage.setItem("classId", val);
      // 发送班级变更事件，触发system_aiExam的getList接口
      eventBus.emit("classChanged", val);
    },
  },
};
</script>

<style lang="scss" scoped>
.course-list {
  .header {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    box-sizing: border-box;
    height: 120px;
    background: #ffffff;
    box-shadow: 0px 0px 7px 0px rgba(70, 123, 235, 0.13);
    border-radius: 10px 10px 0px 0px;
    .course-info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px 30px 15px 18px;
      box-sizing: border-box;
      border-bottom: 1px solid #e8efff;
      .info-left {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .back-btn {
          width: 86px;
          height: 36px;
          background: #ffffff;
          border-radius: 4px;
          border: 1px solid #a5beff;
          text-align: center;
          font-size: 14px;
          color: #457aff;
          display: flex;
          justify-content: center;
          align-items: center;
          .el-icon {
            font-size: 14px;
            color: #457aff;
            margin-right: 4px;
          }
          cursor: pointer;
        }
        .course-title {
          font-size: 20px;
          font-weight: bold;
          color: #4a4966;
          margin-left: 30px;
        }
      }
      .info-right {
        display: flex;
        align-items: center;
        span {
          font-size: 16px;
          color: #6b6a85;
        }
        .el-select {
          width: 120px;
        }
      }
    }
    .header-nav {
      display: flex;
      align-items: center;
      padding: 0px 50px;
      border-bottom: 1px solid #e8efff;
      box-sizing: border-box;
      .el-menu {
        height: 50px;
        border-bottom: none;
        .el-menu-item {
          border-bottom: none;
          position: relative;
          &:hover {
            background-color: #fff;
            color: #457aff;
          }
          &.is-active {
            background-color: #fff;
            border-bottom: none;
            span {
              color: #457aff;
            }
            &::after {
              position: absolute;
              content: "";
              display: block;
              width: 30%;
              height: 2px;
              background-color: #457aff;
              bottom: 0;
              left: 50%;
              transform: translateX(-50%);
            }
          }
        }
      }
    }
  }
}
</style>